/**
 * 进度条组件
 * @class Progress
 * @extends Basic
 * @author 杜慧玲
 *
 *  @param  [showInfo] 是否显示进度文字，默认值：true
 *
 *  @param  [percent] 进度百分比
 *
 *  @param  [className] 设置class样式
 *
 * 示例：
 *
 *     @example
 *     <Progress className="progress" percent="30"/>
 */
var Progress = React.createClass({
    getDefaultProps: function() {
        return {
            type: 'line',
            showInfo: true,
            percent: 0
        };
    },
    render: function(){
        var showInfo = this.props.showInfo;
        var info;
        var infoPos = this.props.infoPosition;
        var textProps = {};

        if(showInfo){
            if(infoPos){
                typeof (infoPos) == 'object'? (
                    textProps.style = infoPos
                ):(
                    textProps.style = {left:+this.props.percent + "%"}
                )
            }
            textProps.className = 'ucs-progress-text';
            if("format" in this.props){
                info = <span className={textProps.className} style={textProps.style}>{this.props.format}</span>;
            }else{
                info = <span className={textProps.className} style={textProps.style}>{this.props.percent}%</span>;
            }
        }
        var pClass = this.props.className? 'ucs-progress '+this.props.className:'ucs-progress';
        return (
            <div className={pClass}>
                <div className="ucs-progress-inner">
                    <span className="ucs-progress-bg" style={{width:+this.props.percent + "%"}}></span>
                </div>
                {info}
            </div>
        )
    }
});

module.exports = Progress;